<template>
  <div>
    <button @click="increment">
      {{ state.count }}
    </button>
    <hr />
    <div>{{ state.count }}</div>
    <hr />
    <div>{{ count }}</div>
  </div>
  <!-- 
    <script>
      import { reactive } from 'vue'
      export default {
        // setup() 函数 手动暴露方法和状态非常繁琐
        setup() {
          const state = reactive({ count: 0 })

          function increment() {
            state.count++
          }

          return {
            state,
            increment
          }
        }
      }
      </script>
   -->
</template>

<script setup>
import { reactive, ref } from "vue";
// 单文件组件 我们可以使用 <script setup>

const state = reactive({ count: 0 })
const count = ref(0)
function increment() {
  // state.count++

  // let n = state.count
  // n++
  // console.log(n, state.count)

  console.log(count, count.value)
  count.value++
  console.log(count.value)

}

// reactive() API 有两条限制：1、只对对象类型的数据有效（对象、数组、Map、Set）。string、number、boolean这样的原始类型无效。
// 2、必须始终保持对该响应式对象的相同引用；3、赋值、解构、传入函数会丢失响应式

// reactive() 的种种限制归根结底是因为 JavaScript 没有可以作用于所有值类型的 “引用” 机制。我们可以使用 ref() 方法任何值类型的响应式 。不会丢失响应式。
// 简言之，ref() 让我们能创造一种对任意值的 “引用”，并能够在不丢失响应性的前提下传递这些引用。这个功能很重要，因为它经常用于将逻辑提取到 组合函数 中。
</script>



